{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作品</title>

    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

    <!-- 自定义样式 -->
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>

    <!-- 页面右上角导航栏 -->
    <div class="navbar" id="navbar">
        <div class="btn-group">
            <a href="/main/home/" class="nav-link">首页</a>
            <a href="/main/about/" class="nav-link">简介</a>
            <a href="/main/works/" class="nav-link">作品</a>
            <a href="/main/board/" class="nav-link">留言板</a>
        </div>
    </div>

    <!-- 作品页面内容 -->
    <div class="container mt-5">
        <h1 class="text-center mb-5">演出合集</h1>

        <!-- 校内作品 -->
        <div class="works-category">
            <h2>校内作品</h2>
            <ul class="list-group">
                {% for work in works_list.校内作品 %}
                    <li class="list-group-item">
                        <strong>{{ work.title }}</strong> - {{ work.role }}
                    </li>
                {% endfor %}
            </ul>
        </div>

        <hr>

        <!-- 商演作品 -->
        <div class="works-category">
            <h2>商演作品</h2>
            <ul class="list-group">
                {% for work in works_list.商演作品 %}
                    <li class="list-group-item">
                        <strong>{{ work.title }}</strong> - {{ work.role }}
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>

    <!-- 引入 Bootstrap 和自定义 JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
